<template>
	<div id="option" class="option" @click="tabItem">
		{{ label }}
	</div>
</template>

<script>
export default {
	props: ["label", "value"],
	inject: ["select"], // 接收select组件中的provide数据,"select"就是父组件的this
	created() {
		// 将自身的label和value，push到给select父组件的options中
		this.select.options.push({
			label: this.label,
			value: this.value,
		})
	},
	methods: {
		tabItem() {
			// 改变select中当前选中的元素
			this.select.curValue = this.value
			this.select.curLabel = this.label
			// 调用select中的方法，收起下拉选框
			this.select.showOption()
		},
	},
}
</script>

<style lang="less" scoped>
.option {
	width: 100%;
	font-size: 14px;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #606266;
	height: 34px;
	line-height: 34px;
	box-sizing: border-box;
	cursor: pointer;
}
.option:hover {
	background-color: #f5f7fa;
}
</style>
